<script setup>
import {onMounted} from "vue";
import {formatAmountForInput} from "@/utils/contract.js";

const {proxy} = getCurrentInstance()
const currentMenu = inject('currentMenu')
const props = defineProps({
  contractInfo: {
    type: Object
  }
})
const data = reactive({
  contractViewForm: {},
})
const {contractViewForm} = toRefs(data)

onMounted(() => {
  contractViewForm.value = props.contractInfo
  contractViewForm.value.dateRange = [props.contractInfo.beginPeriodTime, props.contractInfo.endPeriodTime]
})

function backList() {
  const obj = { path: '/contract/' + currentMenu, query: { t: Date.now() } }
  proxy.$tab.closeOpenPage(obj)
}
</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="contractViewForm" label-position="top" label-width="auto">
        <el-row>
          <el-form-item>
            <el-button @click="backList">返 回</el-button>
          </el-form-item>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同编号">
              <el-input v-model="contractViewForm.conNo" disabled class="my-custom-input"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="订单编号">
              <el-input v-model="contractViewForm.orderNo" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" >
          <el-col :span="12" :xs="24">
            <el-form-item label="文件模板">
              <el-input v-model="contractViewForm.fileTemplateName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="固定格式">
              <el-input v-model="contractViewForm.isFixedFormat" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同名称" prop="name">
              <el-input v-model="contractViewForm.name" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="对方单位名称" prop="tradeCompany">
              <el-input v-model="contractViewForm.tradeCompany" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同金额" prop="total">
              <el-input v-model="contractViewForm.total" :formatter="formatAmountForInput" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="买方方向" prop="tradeType">
              <el-input v-model="contractViewForm.tradeType" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12" :xs="24">
            <el-form-item label="合同类型" prop="conType">
              <el-input v-model="contractViewForm.conType" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="3" :xs="24">
            <el-form-item label="合同期限">
              <el-switch disabled
                         v-model="contractViewForm.hasPeriod"
                         inline-prompt
                         active-text="有固定期限"
                         active-value="是"
                         inactive-text="无固定期限"
                         inactive-value="否"
                         style="--el-switch-on-color: #529b2e; --el-switch-off-color: #6379bb; opacity:0.8;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9" :xs="24" v-show="contractViewForm.hasPeriod==='是'">
            <el-form-item label="固定期限范围">
              <el-date-picker disabled
                              v-model="contractViewForm.dateRange"
                              value-format="YYYY-MM-DD"
                              type="daterange"
                              range-separator="-"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input v-model="contractViewForm.memo" type="textarea" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  .el-input__inner {
    -webkit-text-fill-color: #606266;
  }
}

:deep(.el-range-editor.is-disabled input) {
  color: #606266;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #606266;
}
</style>